import { Collapse, Popover, Popconfirm } from "antd";
import { MoreOutlined, CaretRightOutlined } from "@ant-design/icons";
import { useEffect, useState } from "react";
const { Panel } = Collapse;
const CollapsePanel = ({ templateList = [], getTemplate, confirm, templateAction, defaultActiveKey = null }: any) => {
    const [panelList, setPanelList] = useState<any>([]);
    const onChangePanel = (key: string | string[]) => {
        setPanelList(key);
    };
    useEffect(() => {
        setPanelList(defaultActiveKey);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [defaultActiveKey]);
    // 自定义icon
    const expandIcon = ({ isActive }: any) => <CaretRightOutlined rotate={isActive ? 90 : 0} />;
    const genExtra = (item: any) => (
        <Popover placement="right" content={templateActionList(item, false)} trigger="click">
            <MoreOutlined
                style={{ marginRight: "4px", fontSize: "18px" }}
                onClick={(event) => {
                    event.stopPropagation();
                }}
            />
        </Popover>
    );
    // 子模版操作
    const templateConfig = {
        parent: [
            { label: "新建模板", onclick: templateAction },
            { label: "重命名", onclick: templateAction },
            { label: "删除项目", onclick: templateAction },
        ],
        child: [
            { label: "重命名", onclick: templateAction },
            { label: "删除模板", onclick: templateAction },
        ],
    };
    // 模板列表气泡框展示
    const templateActionList = (item: any, isChild: boolean) => {
        return (
            <div>
                {isChild
                    ? templateConfig.child.map((el, index) => {
                          return (
                              <p
                                  className="action_list"
                                  onClick={(e) => {
                                      e.stopPropagation();
                                      el.onclick(item, el, true);
                                  }}
                                  key={index}
                              >
                                  {el.label === "删除模板" ? (
                                      <Popconfirm title="确定删除这个模板吗?" onConfirm={() => confirm(true)} okText="确定" cancelText="取消">
                                          {el.label}
                                      </Popconfirm>
                                  ) : (
                                      el.label
                                  )}
                              </p>
                          );
                      })
                    : templateConfig.parent.map((el, index) => {
                          return (
                              <p
                                  className="action_list"
                                  onClick={(e) => {
                                      e.stopPropagation();
                                      el.onclick(item, el, false);
                                  }}
                                  key={index}
                              >
                                  {el.label === "删除项目" ? (
                                      <Popconfirm title="确定删除这个项目吗?" onConfirm={() => confirm(false)} okText="确定" cancelText="取消">
                                          {el.label}
                                      </Popconfirm>
                                  ) : (
                                      el.label
                                  )}
                              </p>
                          );
                      })}
            </div>
        );
    };
    return (
        <Collapse activeKey={panelList} ghost onChange={onChangePanel} expandIcon={(props) => expandIcon(props)}>
            {templateList?.length &&
                templateList?.map((item: any, index: number) => {
                    return (
                        <Panel
                            header={
                                <span style={{ whiteSpace: "nowrap" }} title={item.projectName}>
                                    {item.projectName}
                                </span>
                            }
                            key={index}
                            style={{ padding: "12px 0" }}
                            extra={genExtra(item)}
                        >
                            {item.templates?.length &&
                                item.templates?.map((el: any) => {
                                    return (
                                        <p
                                            key={el.templateId}
                                            className={`template ${el.isChecked ? "checkedTemplate" : ""}`}
                                            onClick={() => {
                                                getTemplate(el.templateId, templateList);
                                                let url_p = window.location.origin + window.location.pathname + `?templateId=${el.templateId}`;
                                                // @ts-ignore
                                                window.history.pushState(null, "", url_p);
                                            }}
                                        >
                                            <span title={el.name} className="templateName">
                                                {el.name}
                                            </span>
                                            <Popover placement="right" content={templateActionList(el, true)} trigger="click">
                                                <MoreOutlined
                                                    style={{ fontSize: "18px" }}
                                                    onClick={(event) => {
                                                        event.stopPropagation();
                                                    }}
                                                />
                                            </Popover>
                                        </p>
                                    );
                                })}
                        </Panel>
                    );
                })}
        </Collapse>
    );
};
export default CollapsePanel;
